<template>
    <view>
        <view class="xilu_trends" v-for="(item,index) in trends">
            <view class="flex-box">
                <image @click="bindHome(item.user_id)" :src="item.user?item.user.avatar:''" mode="aspectFill" class="xilu_avatar"></image>
                <view class="flex-grow-1">
                    <view class="blue fs32 pb10">{{item.user?item.user.nickname:''}}</view>
                    <view class="fs22 col89">{{item.createtime_text}}</view>
                </view>
                <view>
					<template v-if="showFocus">
                    <view class="btn1" @click="toggleFocus(index,item.user_id)" v-if="!item.is_focus_count">+ 关注</view>
                    <view class="btn3" @click="toggleFocus(index,item.user_id)" v-else>已关注</view>
					</template>
                </view>
            </view>
            <!-- <view class="blue fs32" >今天 18:20</view> -->
            <view class="pt25 fs30 col10" @click="bindDetail(item.id)">{{item.content}}</view>
            <view class="flex-box flex-wrap" v-if="item.images_text.length == 1">
                <image :src="items" mode="aspectFill" v-for="(items,indexs) in item.images_text" class="xilu_pic pic1" @click="previewImg(index,indexs)"></image>
				
            </view>
            <view class="flex-box flex-wrap" v-else-if="item.images_text.length == 2">
                <image :src="items" mode="aspectFill" v-for="(items,indexs) in item.images_text" class="xilu_pic pic2" @click="previewImg(index,indexs)"></image>
            </view>
            <view class="flex-box flex-wrap" v-if="item.images_text.length > 2">
                <image :src="items" mode="aspectFill" v-for="(items,indexs) in item.images_text" class="xilu_pic pic3" @click="previewImg(index,indexs)"></image>
            </view>
            <view class="flex-box xilu_actions">
                <view class="flex-box flex-center flex-grow-1" @click="togglesCollect(index,item.id)">
                    <image src="../../static/icon/find_like-on.png" mode="aspectFill" class="find_icon" v-if="item.is_collection_count"></image>
                    <image src="../../static/icon/find_like.png" mode="aspectFill" class="find_icon" v-else></image>
                    <view class="fs26 col80">{{item.collection_count}}</view>
                </view>
                <view class="flex-box flex-center flex-grow-1" @click="comment(index,item.id)">
                    <image src="../../static/icon/find_comment.png" mode="aspectFill" class="find_icon"></image>
                    <view class="fs26 col80">{{item.comment_count}}</view>
                </view>
                <view class="flex-box flex-center flex-grow-1" @click="togglesRec(index,item.id)">
                    <image src="../../static/icon/find_zan-on.png" mode="aspectFill" class="find_icon" v-if="item.is_fav_count"></image>
                    <image src="../../static/icon/find_zan.png" mode="aspectFill" class="find_icon" v-else></image>
                    <view class="fs26 col80">{{item.fav_count}}</view>
                </view>
				<view v-if="userId==item.user_id" class="flex-box flex-center flex-grow-1" @click="togglesDel(index,item.id)">
				    <image src="../../static/icon/delete.png" mode="aspectFill" class="find_icon" ></image>
				    <view class="fs26 col80"></view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "Trends",
        props: {
            trends: {
                default: [],
                type: Array
            },
            showFocus: {
                default: true,
                type: Boolean
            },
            personal: {
                default: true,
                type: Boolean
            },
			userId: {
			    default: 0,
			    type: Number
			}
        },
        data() {
            return {

            };
        },
        methods: {
            togglesCollect(index, id) {
                this.$emit("togglesCollect", {
                    index,
                    id
                })
            },
            togglesRec(index, id) {
                this.$emit("togglesRec", {
                    index,
                    id
                })
            },
			togglesDel(index,id){
				let page = this;
				uni.showModal({
					title:'提示',
					content: '确认删除?',
					success(res) {
						if(res.confirm){
							page.$emit("togglesDel", {
							    index,
							    id
							})
						}
					}
				})
				
			},
            comment(index, id) {
                this.$emit("comment", {
                    index,
                    id
                })
            },
            toggleFocus(index, user_id) {
                this.$emit("toggleFocus", {
                    index,
                    user_id
                })
            },
            previewImg(arrIndex, picIndex) {
                this.$emit("previewImg", {
                    arrIndex,
                    picIndex
                })
            },
            bindDetail(id) {
                this.$emit("bindDetail", {
                    id
                })
            },
            bindHome(userId) {
                uni.navigateTo({
                    url: '/pages/home_page/home_page?id=' + userId + '&tab=forum'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_trends {
            margin: 0 30rpx;
            padding: 40rpx 0 0;
            border-bottom: 1px solid #eee;

            .btn1 {
                font-size: 24rpx;
                width: 110rpx;
                height: 56rpx;
                line-height: 54rpx;
            }

            .find_icon {
                width: 35rpx;
                height: 35rpx;
                margin-right: 14rpx;
            }
        }

        &_avatar {
            width: 82rpx;
            height: 82rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        &_pic.pic1 {
            width: 380rpx;
            height: 380rpx;
            border-radius: 20rpx;
            margin-top: 25rpx;
        }

        &_pic.pic2 {
            width: 340rpx;
            height: 340rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-top: 25rpx;

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }

        &_pic.pic3 {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-top: 25rpx;

            &:nth-of-type(3n) {
                margin-right: 0;
            }
        }

        &_actions {
            .flex-box {
                padding: 32rpx 0;
            }
        }

    }
</style>